<template>
  <div>
    <!-- 个人中心 -->
    <div v-for="(item, index) in personalModuleList" :key="index">
      <div v-if="index > 1">
        <div class="c-bg-white c-br16" :class="[item.titleStatus == 1 ? 'c-pt28' : '', item.pageStyle == 1 ? 'c-pb30' : 'c-pb10',index<personalModuleList.length-1 ?'c-mb20':'' ]" v-if="item.status && item.isEmptyProject > 0">
          <div class="c-fs24 c-fw-b c-ph20 c-fc-xblack" v-if="item.titleStatus">{{item.name}}</div>
          <!-- iconStyle  1填色版 2线框版 , pageStyle 1九宫格 2列表式-->
          <div v-if="item.iconStyle == 1">
            <!-- 填色版 && 九宫格 -->
            <div v-if="item.pageStyle == 1" class="c-flex-row c-flexw-wrap">
              <div v-for="(cItem, cIndex) in item.project" :key="cIndex" :class="cItem.enable && getIsShow(cItem.keyword) ? 'c-w25 c-textAlign-c c-pt40 fullColor' : ''">
                <div v-if="cItem.enable && getIsShow(cItem.keyword)" @click="goDetail(cItem.keyword, cItem)">
                  <span class="iconfont iconShow c-fs36" v-html="iconfonts[cItem.keyword]"></span>
                  <div class="c-pt16 c-fc-xblack ">{{cItem.name || cItem.defaultName}}</div>
                </div>
              </div>
            </div>
            <div v-else>
              <!-- 填色版 && 列表 -->
              <div v-for="(cItem, cIndex) in item.project" :key="cIndex" class="fullColor c-ph24">
                <div v-if="cItem.enable && getIsShow(cItem.keyword)" class="c-flex-row c-aligni-center c-hh92" @click="goDetail(cItem.keyword, cItem)">
                  <span class="iconfont iconShow c-fs32" v-html="iconfonts[cItem.keyword]"></span>
                  <div class="c-ml20 c-flex-row c-aligni-center c-w100" :class="cIndex == item.project.length - 1 ? '' : 'c-bd-b1'">
                    <div class="c-h c-fs24 c-flex-row c-flex-grow1 c-w0 c-aligni-center c-fc-xblack" >{{cItem.name || cItem.defaultName}}</div>
                    <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end  c-hh92" >
                      <span class="iconfont c-fs20">&#xe635;</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <!-- 线框版 && 九宫格 -->
            <div v-if="item.pageStyle == 1" class="c-flex-row c-flexw-wrap">
              <div v-for="(cItem, cIndex) in item.project" :key="cIndex" :class="cItem.enable && getIsShow(cItem.keyword) ? 'c-w25 c-textAlign-c c-pt40' : ''">
                <div v-if="cItem.enable && getIsShow(cItem.keyword)" @click="goDetail(cItem.keyword, cItem)">
                  <svg-icon :icon-class="cItem.keyword" class="c-fs32" :class="colorName"></svg-icon>
                  <div class="c-pt16 c-fc-xblack">{{cItem.name || cItem.defaultName}}</div>
                </div>
              </div>
            </div>
            <div v-else>
              <!-- 线框版 && 列表 -->
              <div v-for="(cItem, cIndex) in item.project" :key="cIndex">
                <div v-if="cItem.enable && getIsShow(cItem.keyword)" class="c-hh92 c-ph24 c-flex-row c-aligni-center" @click="goDetail(cItem.keyword, cItem)">
                  <svg-icon :icon-class="cItem.keyword" class="c-fs28" :class="colorName"></svg-icon>
                  <div class="c-flex-row c-aligni-center c-w100 c-ml20" :class="cIndex == item.project.length - 1 ? '' : 'c-bd-b1'">
                    <div class=" c-h c-flex-row c-flex-grow1 c-w0 c-aligni-center c-fs24 c-fc-xblack" >{{cItem.name || cItem.defaultName}}</div>
                    <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end  c-hh92" >
                      <span class="iconfont c-fs20">&#xe635;</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="index==personalModuleList.length-1" class="c-hh20 c-w100 c-bg-sgray">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: "memberIndexFullColor",
  props: {
    personalModuleList: {
      type: Array,
      default: () => {
        return []
      }
    },
    memberInfo: {
      type: Object,
      default: null,
    },
    promotedAccount: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      colorName: localStorage.getItem("colorName") || 'mb7_blue',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      enableAreaAgent: localStorage.getItem("enableAreaAgent"), //旧版区域代理
      isiOS: false,
      isYouke: false,
      isAnApp: false,
      iconfonts: {
        MY_ITEM_BANK: '&#xe6b9;',
        MY_QUESTION: '&#xe6c4;',
        MY_COURSES: '&#xe69e;',
        TELEVISE_LIVE: '&#xe69b;',
        MY_EXAM: '&#xe6b7;',
        MY_WRONG: '&#xe6b5;',
        MY_SIGN_CARD: '&#xe6ae;',
        SERVICE_PROVIDER: '&#xe6cb;',
        SHAREHOLDER_CENTER: '&#xe708;',
        STUDY_RECORD: '&#xe6d9;',
        PRESENT_RECORD: '&#xe6fe;',
        MY_COLLAGE: '&#xe6e5;',
        MY_ACHIEVE: '&#xe6d1;',
        MY_CLASSMATE: '&#xe723;',
        VOTE_ACTIVITY: '&#xe6e3;',
        MY_ACTIVITY: '&#xe6c6;',
        MY_SOCIAL: '&#xe6bd;',
        MY_RESERVATION_COURSE: '&#xe695;',
        MY_RESERVATION: '&#xe6cd;',
        EDUCATION_SYSTEM: '&#xe697;',
        AREA_USER_AGENT: '&#xe702;',
        MY_CIRCLE: '&#xe6a8;',
        MY_DICTIONARY: '&#xe6c0;',
        MY_BARGAIN: '&#xe804;',
        SET: '&#xe605;',
        PROMOTED_ACCOUNT: '&#xe733;',
        AGENT_STAFF: '&#xfbcb;',
        CHAIN: '&#xe78b;',
        LY_APP: '&#xea51;',
        CARE_MODEL: '&#xe74b;',
        SH_ADDRESS: '&#xe7f1;',
        RELEASE_CLOUD: '&#xe8f1;',
      },
      pathArr: {
        MY_ITEM_BANK: '/member/myPractice/myPracticeList',
        MY_COURSES: '/member/myInterest/interestIndex',
        TELEVISE_LIVE: '/member/myLive/myLiveCourse',
        MY_EXAM: '/member/myExamination/myExamination',
        MY_WRONG: '/member/myWrongTopic/list',
        MY_SIGN_CARD: '/member/myClockIn/myClockInList',
        SERVICE_PROVIDER: '/homePage/agent/agentIndex',
        SHAREHOLDER_CENTER: '/homePage/agent/agentIndex?fromType=shareholder',
        STUDY_RECORD: '/member/watchList/watchList?ckFrom=5',
        PRESENT_RECORD: '/member/presentCourse/presentCourseList',
        MY_COLLAGE: '/member/myCollage/myCollageList',
        MY_ACHIEVE: '/member/myAchievement/AchievementList',
        MY_CLASSMATE: '/member/classmates/classmatesIndex',
        VOTE_ACTIVITY: '/member/myVote/voteIndex',
        MY_BARGAIN: '/homePage/bargain/myBargain',
        MY_ACTIVITY: '/member/myActivity/myActivity',
        MY_SOCIAL: '/member/mySocial/mySocialGroup',
        MY_RESERVATION: '/member/myBooking/myBookingList',
        EDUCATION_SYSTEM: '/edu/faceTeaching',
        MY_CIRCLE: '/homePage/circle/myCircle',
        MY_DICTIONARY: '/member/myWord/wordIndex',
        SET: '/member/personalMessageSetting/personalMessageSetting',
        AGENT_STAFF: '/homePage/agent/staffIndex',
        LY_APP: 'https://kpreport.ckjr001.com/studyAppDownload.html',
        CARE_MODEL: '/member/careSolicitude/careInfo',
        CHAIN: '/homePage/agent/chainInfo',
        SH_ADDRESS: '/mall/shippingAddress/addressList',
        RELEASE_CLOUD: '/fashou/activity'
      },
    };
  },
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    goDetail(val, cItem) {
      if (val == 'LY_APP') {
        window.location.href = `${this.pathArr[val]}`;
      } else if (val == 'AREA_USER_AGENT') {
        let comeFrom = !!this.companyAuth.enableNewAreaAgent && this.companyAuth.enableNewAreaAgent == 1 ? 0 : !!this.companyAuth.enableXhAreaAgent && this.companyAuth.enableXhAreaAgent == 1 ? 1 : 2;
        let toPath = '/homePage/newAreaUser/apply?comeFrom=' + comeFrom;
        this.iosAppRouteChange(toPath);
      } else if (val == 'MY_QUESTION') {
         if (this.memberInfo.isAnswer == 1) {
          let toPath = '/homePage/qa/myQA?isAswer=1';
          this.iosAppRouteChange(toPath);
        } else {
          let toPath = '/homePage/qa/myQA';
          this.iosAppRouteChange(toPath);
        }
      } else if (val == 'MY_RESERVATION_COURSE') {
        if (this.companyAuth.enableDeclareModule == 1) { // 聚尚美跳到预约的主题列表
          let toPath = '/member/myReservation/myReservationList';
          this.iosAppRouteChange(toPath);
        } else {
          let toPath = '/member/myReservation/reservationClassList';
          this.iosAppRouteChange(toPath);
        }
      } else if (val == 'EDUCATION_SYSTEM') {
        // 当为1得时候跳转到学生端，为2跳转到老师端
        if (this.memberInfo.jwRole.role == 2) {
          let toPath = '/edu/courseManagment';
          this.iosAppRouteChange(toPath);
        } else {
          let toPath = '/edu/faceTeaching';
          this.iosAppRouteChange(toPath);
        }
      } else if (val == 'PROMOTED_ACCOUNT') {
        //code == 0 可以进入推广页面，已有页面 3 未创建微页面 2 推广账号已过期 4账号已停用  !=1 已经创建账号了
        //auditStatus == 2 审核通过  -1不通过 1审核中 0未提交过
        //isCanApply == 1 可以申请 （身份是否符合）
        if (this.promotedAccount.code == 0) {
          let toPath = '/homePage/microPage/microPage?mId=' + this.promotedAccount.mId + '&isPromotedAccount=1';
          this.iosAppRouteChange(toPath);
        } else if (this.promotedAccount.code == 3) {
          this.$routerGo(this, "push", {
            path: `/error/emptyPage?info=请在商家后台创建微页面`
          });
          return;
        } else if (this.promotedAccount.code == 2) {
          this.$showCjToast({
            text: '子店铺已过期 ',
            type: 'warn'
          });
          return;
        } else if (this.promotedAccount.code == 4) {
          this.$showCjToast({
            text: '此账号已停用',
            type: 'warn'
          });
          return;
        } else if (this.promotedAccount.auditStatus < 2) {
          let toPath = '/homePage/agent/promotedAccountIndex';
          this.iosAppRouteChange(toPath);
        } else {
          this.$showCjToast({
            text: this.promotedAccount.msg ? this.promotedAccount.msg : '暂无权限',
            type: 'warn'
          });
          return;
        }
      } else if (val == 'MY_CLASSMATE') {
        let toPath = '/homePage/agent/chainInfo?name=' + cItem.name + '&fromType=promoter';
        this.iosAppRouteChange(toPath);
      } else {
        let toPath = `${this.pathArr[val]}`;
        this.iosAppRouteChange(toPath);
      }
    },
    getIsShow(keyword) {
      let ua = window.navigator.userAgent.toLowerCase();
      let mapList = {
        MY_ACTIVITY: 1,
        MY_QUESTION: this.memberInfo && this.memberInfo.questionInfo && this.memberInfo.questionInfo.status == 1,
        MY_RESERVATION_COURSE: 1,
        MY_SOCIAL: 1,
        MY_DICTIONARY: 1,
        MY_RESERVATION: 1,
        EDUCATION_SYSTEM: 1,
        MY_CIRCLE: 1,
        TELEVISE_LIVE: ((this.companyAuth.enableTeleviseLive == 1 || this.companyAuth.enableLivePersonalModule == 1) && ((!this.isiOS && !this.isAnApp) || this.memberInfo.enableLiveVideo == 1)) || this.companyAuth.enableLivePrivateClass == 1,
        MY_ITEM_BANK: 1,
        MY_COURSES: 1,
        MY_EXAM: 1,
        MY_WRONG: this.companyAuth.enableSignCardModule == 1 || this.companyAuth.enableExamModule == 1,
        MY_SIGN_CARD : this.companyAuth.enableSignCardModule == 1 ? 1 : 0,
        SERVICE_PROVIDER: ((!this.isiOS && !this.isAnApp) || this.memberInfo.enableAgent == 1) && this.companyAuth != null && this.companyAuth.agentLevels > 0,
        AREA_USER_AGENT: this.companyAuth.enableXhAreaAgent == 1 ? 1 : this.companyAuth.enableNewAreaAgent == 1 && ([3, 5, 6, 7, 8].indexOf(this.memberInfo.vipType) != -1) ? 1 : this.enableAreaAgent == 1 ? 1 : 0,
        SHAREHOLDER_CENTER: this.companyAuth.shareholderLevels > 0,
        PRESENT_RECORD: !this.isiOS,
        STUDY_RECORD: 1,
        MY_COLLAGE: this.companyAuth.enableCollage,
        MY_ACHIEVE: (this.companyAuth.enableSignCardModule == 1 || this.companyAuth.enableExamModule == 1) && this.companyAuth.enableCertificate,
        MY_CLASSMATE: 1,
        VOTE_ACTIVITY: this.companyAuth.enableVoteActivity == 1,
        MY_BARGAIN: this.companyAuth.enableBargain == 1,
        SET: !(utilJs.isIOSAppALL()) && !(utilJs.isAndroidApp() || utilJs.isAndoridNewApp()),
        PROMOTED_ACCOUNT: this.promotedAccount && !(this.promotedAccount.code == 1 && this.promotedAccount.isCanApply == 0),
        AGENT_STAFF: 1,
        CHAIN: 1,
        LY_APP: localStorage.getItem("useLvYueApp") && localStorage.getItem("useLvYueApp") == 1 && !utilJs.isAndroidApp() ? true : false,
        CARE_MODEL: ua.match(/MicroMessenger/i) == 'micromessenger' ? 1 : 0, // 必须是微信浏览器下才显示关怀模式按钮
        SH_ADDRESS: 1,
        RELEASE_CLOUD: 1
      }
      return mapList[keyword]
    },
  },
  activated() {
    setDocumentTitle("会员中心");// eslint-disable-line
    this.isAnApp = utilJs.isAndroidApp() || utilJs.isAndoridNewApp();
    this.isiOS = utilJs.isIOSAppALL();
    this.isYouke = utilJs.isIOSAnonUser();
    this.isApp = utilJs.isAndroidApp() || utilJs.isIOSApp();
  }
};
</script>

<style lang="scss" scoped>
.mb3_orange {
  color: #ff5d3d;
}
.mb3_green {
  color: #30B656;
}
.mb3_ruby {
  color: #d60808;
}
.mb3_blown {
  color:#976800;
}
.mb3_blue {
  color: #248afd;
}
.mb3_yellow {
  color: #FF9302;
}
.mb3_tinyGreen {
  color: #65C4AA;
}
.mb3_drakBlue {
 color: #406596;
}
.mb3_purple{
  color: #6e41f2;
}
.mb3_black {
  color: #333333;
}
.mb7_blue {
  color: #248afd;
}
.mb7_purple{
  color: #6e41f2;
}
.mb7_pink{
  color: #f74163;
}
.mb7_orange {
 color: #ff5d3d;
}
.mb7_green{
 color: #30b656;
}
.mb7_ruby {
  color: #d60808;
}
.mb7_blown {
 color: #976800;
}
.mb7_drakBlue {
 color: #406596;
}
.mb7_black{
  color: #333333;
}
.mb7_yellow {
  color: #FF9302;
}
.mb7_tinyGreen {
  color: #65C4AA;
}
.iconShow {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fullColor:nth-of-type(3n) .iconShow {
  background-image: linear-gradient(180deg, rgba(255, 106, 55, 0.6) 0%, #ff6a37 100%);
}
.fullColor:nth-of-type(3n + 1) .iconShow {
  background-image: linear-gradient(180deg, rgba(71, 156, 255, 0.6) 0%, #479cff 100%);
}
.fullColor:nth-of-type(3n + 2) .iconShow {
  background-image: linear-gradient( 180deg,rgba(89, 202, 57, 0.6) 0%, #59ca39 100%);
}
</style>